<template>
    <el-dialog title="提示" :visible.sync="dialogVisible" @close="close" width="60%">
        <div class="info-show-group">
            <div class="info-show-group-item">
                <div class="label">{{ $t('finance.groupName') }}:</div>
                <div>{{ data.groupName }}</div>
            </div>
            <div class="info-show-group-item">
                <div class="label">{{ $t('finance.showTime') }}:</div>
                <el-input maxlength=10 class="info-show-group-item-input" v-model="data.showDayCount" placeholder="请输入内容"></el-input>
            </div>
        </div>
        <div class="form-wrap" v-for="(item, index) in formData.kanaProductDivideDTOList" :key="index">
            <el-button class="delate" @click="delate(index)" type="primary">{{ $t('system.delete') }}</el-button>
            <el-form :rules="rules" :ref="`formDialog${index}`" label-width="130px" :model="item">
                <el-row>
                    <el-col :span="11">
                        <el-form-item prop="productId" :label="$t('common.productId')">
                            <el-select v-model="item.productId" :data-index="index" @change="selectGroupName(index)">
                                <el-option v-for="item in item.groupNameList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item prop="loanSuccessCount" :label="$t('operation.borrowTimes')">
                            <el-input v-model="item.loanSuccessCount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="totalOverdueDay" :label="$t('common.totalRelayDays')">
                            <el-input v-model="item.totalOverdueDay"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item :label="$t('operation.preOverdueDay')">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item prop="orderOverdueDayLeft" >
                                <el-input v-model="item.orderOverdueDayLeft" maxlength=10></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">~</el-col>
                        <el-col :span="6">
                            <el-form-item prop="orderOverdueDay">
                                <el-input v-model="item.orderOverdueDay" maxlength=10></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form-item>
                
            </el-form>
        </div>

        <div class="add-button" @click="addList">
            <div class="left"></div>
            <div class="bottom"></div>
        </div>
        <!-- <el-form :rules="rules" :model="formData" ref="formDialog" label-width="150px" class="demo-dynamic">
            <el-form-item prop="groupName" :label="$t('finance.groupName')">
                <el-select v-model="formData.groupName">
                    <el-option v-for="item in groupNameList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('finance.showTime') + '(' + $t('common.day') + ')'" prop="showDayCount">
                <el-input v-model="formData.showDayCount"></el-input>
            </el-form-item>
        </el-form> -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">{{ $t('common.cancel') }}</el-button>
            <el-button type="primary" @click="submitForm('formDialog')">{{ $t('common.submit') }}</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        data: {}
    },
    data() {
        return {
            rules: {
                productId: [
                    { required: true, message: 'Please enter the group name', trigger: "blur", }
                ],
                orderOverdueDay: [
                    { required: true, message: 'Please enter the Last overdue days', trigger: "blur", },
                    {
                        // pattern: /^[0-9]*[0-9][0-9]*$/,
                        pattern: /^-?\d+$/,
                        message: 'Please enter right days', //''
                        trigger: "blur",
                    },
                ],
                loanSuccessCount: [
                    { required: true, message: 'Please enter the Number of borrowings', trigger: "blur", },
                    {
                        pattern: /^[0-9]*[0-9][0-9]*$/,
                        message: 'Please enter right Number', //''
                        trigger: "blur",
                    },
                ],
                totalOverdueDay: [
                    { required: true, message: 'Please enter the Total overdue days', trigger: "blur", },
                    {
                        pattern: /^[0-9]*[0-9][0-9]*$/,
                        message: 'Please enter right days', //'小数点前1~7位，小数点后1~2位的数字，如：200.00 , 0.12'
                        trigger: "blur",
                    },
                ],
                orderOverdueDayLeft: [
                    { required: true, message: 'lease enter the first overdue days', trigger: "blur", },
                    {
                        pattern: /^-?\d+$/,
                        message: 'Please enter right days',
                        trigger: "blur",
                    }
                ]
            },
            dialogVisible: true,
            groupNameList: [],
            formData: {
                id: '',
                kanaProductDivideDTOList: []
            }
        };
    },
    created() {
        this.queryConnectProductByKana()
    },
    methods: {
        selectGroupName(index) {
            let productId = this.formData.kanaProductDivideDTOList[index].productId;
            this.formData.kanaProductDivideDTOList.forEach((item, nub) => {
                if (index != nub) {
                    for (let i = 0; i < item.groupNameList.length; i++) {
                        if (productId == item.groupNameList[i].id) {
                            item.groupNameList.splice(i, 1)
                        }
                    }
                }
            });
        },
        delate(index) {
            let kanaProductDivideDTO = this.formData.kanaProductDivideDTOList[index];
            let groupNameItem = {};
            this.groupNameList.forEach(item => {
                if (kanaProductDivideDTO.productId == item.id) {
                    groupNameItem = item;
                }
            });
            this.formData.kanaProductDivideDTOList.splice(index, 1);
            if (groupNameItem != {}) {
                this.formData.kanaProductDivideDTOList.forEach(item => {
                    item.groupNameList.push(groupNameItem)
                })
            }

        },
        addList() {
            let obj = {
                productId: '',
                orderOverdueDay: '',
                loanSuccessCount: '',
                totalOverdueDay: '',
                groupNameList: []
            };
            let arr = [];
            for (let i = 0; i < this.groupNameList.length; i++) {
                let item = this.groupNameList[i];
                let isPush = true;
                for (let j = 0; j < this.formData.kanaProductDivideDTOList.length; j++) {
                    let jtem = this.formData.kanaProductDivideDTOList[j];
                    if (item.id == jtem.productId) {
                        isPush = false
                    }
                };
                if (isPush) {
                    arr.push(item)
                }
            };
            obj.groupNameList = arr;
            this.formData.kanaProductDivideDTOList.push(obj)
        },
        queryConnectProductByKana() {
            let params = {
                id: this.data.id
            };
            this.$api.finance.kanaProductDivide.queryConnectProductByKana(params).then(res => {
                console.warn(res)
                const { status, error, data, msg } = res;
                if ("1" === status && "00000000" === error && data) {
                    this.formData.id = data.id;
                    let kanaProductDivideDTOList = data.kanaProductDivideDTOList;
                    this.queryProductByKana({ id: data.id },kanaProductDivideDTOList)
                } else {
                    this.$message.error(msg);
                }
            })
        },
        close() {
            this.$emit('edirGroupClose')
        },
        queryProductByKana(params,kanaProductDivideDTOList) {
            this.$api.finance.kanaProductDivide.queryProductByKana(params).then(res => {
                let { status, error, data, msg } = res;
                if ("1" === status && "00000000" === error && data) {
                    this.groupNameList = data.data;
                    // let kanaProductDivideDTOList = this.formData.kanaProductDivideDTOList
                    kanaProductDivideDTOList.forEach((item,index)=>{
                        item.groupNameList =  JSON.parse(JSON.stringify(data.data));
                        for(let i = 0;i<kanaProductDivideDTOList.length;i++){
                            if(i!=index){
                                for(let j = 0;j<item.groupNameList.length;j++){
                                    if(item.groupNameList[j].id==kanaProductDivideDTOList[i].productId){
                                        item.groupNameList.splice(j,1)
                                    }
                                }
                            }
                        };
                    });
                    console.log(kanaProductDivideDTOList)
                    this.formData.kanaProductDivideDTOList = kanaProductDivideDTOList
                } else {
                    this.$message.error(msg);
                }
            })
        },
        submitForm(formName) {
            let isSub = true;
            let that = this;
            console.log(this.formData)
            this.formData.kanaProductDivideDTOList.forEach((item, index) => {
                let name = `${formName}${index}`;
                console.warn(this.$refs[name][0].validate)
                this.$refs[name][0].validate((valid) => {
                    if (valid) {
                        isSub = true
                    } else {
                        isSub = false
                        return false
                    }
                })
            });
            if (isSub) {
                let params = {
                    showDayCount: this.data.showDayCount,
                    id: this.formData.id,
                    kanaProductDivideDTOList: [],
                };
                this.formData.kanaProductDivideDTOList.forEach(item => {
                    let obj = {
                        loanSuccessCount: item.loanSuccessCount,
                        orderOverdueDayLeft: item.orderOverdueDayLeft,
                        orderOverdueDay: item.orderOverdueDay,
                        productId: item.productId,
                        totalOverdueDay: item.totalOverdueDay,
                    };
                    params.kanaProductDivideDTOList.push(obj)
                });
                console.log(params)
                this.$api.finance.kanaProductDivide.updateConnectProductByKana(params).then(res => {
                    const { status, error, data, msg } = res;
                    if ("1" === status && "00000000" === error) {
                        this.$emit('editGroupSuc')
                    } else {
                        this.$message.error(msg);
                    }
                })
            }
            // this.$refs[formName].validate((valid) => {
            //     if (valid) {
            //         let params = this.formData;
            //         this.$api.finance.kanaProductDivide.addGroup(params).then(res => {

            //             const { status, error, data, msg } = res;
            //             if ("1" === status && "00000000" === error && data) {
            //                 this.$emit('addGroupSuc')
            //             } else {
            //                 this.$message.error(msg);
            //             }
            //         })
            //     } else {
            //         return false;
            //     }
            // });
        },
    }
};
</script>
<style lang="scss" scoped>
.info-show-group {
    .info-show-group-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 10px;

        .label {
            width: 200px;
        }
        &-input {
            width: 40%;
        }
    }
}

.form-wrap {
    border: 1px solid #999;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    position: relative;

    .delate {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 1;
    }

    .el-input__inner {
        border: 1px solid #999 !important;
    }
}
.order-over-delay {
    display: flex;
    align-items: center;
    span {
        margin: 0 10px;
    }
}

.add-button {
    margin-top: 20px;
    cursor: pointer;
    width: 100%;
    height: 100px;
    border: 1px solid #999;
    border-radius: 20px;
    position: relative;

    .left {
        width: 1px;
        height: 80px;
        position: absolute;
        left: 50%;
        top: 10px;
        background: #999;
    }

    .bottom {
        width: 80%;
        height: 1px;
        background: #999;
        position: absolute;
        left: 10%;
        top: 49px;
    }
}
.line {
    text-align: center;
}
</style>